<template>
  <div class="progress-container">
    <p>{{ timeTitle }}</p>
    <div class="progress-bar-container">
      <div class="relative bg-#b6b6b6 flex-1 mr3px progressBox">
        <div class="progress-bar" :style="{ width: progress + '%' }"></div>
      </div>
      <div class="progress-info">
        <span>{{ currentStep + 1 }} / {{ totalSteps }}</span>
      </div>
      <div class="controls bg-#007aff">
        <ryicon name="shangyishou" @click="prevStep" :disabled="currentStep === 0"></ryicon>
        <ryicon :name="isPaused ? 'bofang' : 'zanting'" @click="togglePause"></ryicon>
        <ryicon name="xiayishou" @click="nextStep" :disabled="currentStep === totalSteps - 1"></ryicon>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

// 接收 props
const props = defineProps({
  stepsData: {
    type: Array,
    required: true,
  },
});

const totalSteps = props.stepsData.length; // 总步骤数
const currentStep = ref(0); // 当前步骤
const progress = ref(0); // 当前进度
const isPaused = ref(false); // 是否暂停
let interval;

// 根据当前步骤更新时间标题
const timeTitle = computed(() => props.stepsData[currentStep.value].title);

// 启动进度函数
const startProgress = () => {
  if (isPaused.value) return;

  interval = setInterval(() => {
    if (currentStep.value < totalSteps - 1) {
      progress.value += 100 / (totalSteps * 10); // 每个步骤10个单位
      if (progress.value >= 100) {
        progress.value = 0;
        currentStep.value++;
      }
    } else {
      clearInterval(interval);
    }
  }, 100);
};

// 切换暂停状态
const togglePause = () => {
  isPaused.value = !isPaused.value;
  if (isPaused.value) {
    clearInterval(interval);
  } else {
    startProgress();
  }
};

// 下一步函数
const nextStep = () => {
  if (currentStep.value < totalSteps - 1) {
    currentStep.value++;
    progress.value = 0; // 重置进度
    startProgress(); // 开始新的步骤
  }
};

// 上一步函数
const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--;
    progress.value = 0; // 重置进度
    startProgress(); // 开始新的步骤
  }
};

// 监听当前步骤变化，重置进度并启动
watch(currentStep, () => {
  progress.value = 0; // 重置进度
  startProgress();
});

// 组件挂载时启动进度
startProgress();
</script>

<style scoped lang="scss">
p {
  margin: 0;
  font-size: 15px;
}

.progress-container {
  width: calc(100% - 20px);
  background: #3769977d;
  padding: 10px;
  margin: 10px;
  box-sizing: border-box;
  border-radius: 5px;
  color: #fff;
}

.progress-bar-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.progress-bar {
  height: 8px;
  border-radius: 5px;
  background-color: #007aff;
  transition: width 0.1s;
}

.progress-info {
  margin: 0 5px 0 2px;
}

.controls {
  width: 25%;
  display: flex;
  padding: 6px;
  border-radius: 5px;
  box-sizing: border-box;
  justify-content: space-between;
}

.progressBox {
  border-radius: 5px;
}
</style>
